<template>
  <div class="pointTab_wrap">
    <headTop :headClass="'white_header'">
      Present hall
      <span slot="right" class="right" @click="$router.push({path: 'countryChoose'})">
        <span class="lang" v-html="lang"></span>
        <span class="iconfont icon-fanhui"></span>
      </span>
    </headTop>
    <!-- tabswitch -->
    <div class="trade_navs" :class="`active${navIndex}`">
      <div class="trade_nav" :class="{'pay': navIndex === 0}" @click="tradeNav(0)">
        Buy center
      </div>
      <div class="trade_nav" :class="{'sell': navIndex === 1}" @click="tradeNav(1)">
        Selling center
      </div>
      <div class="trade_nav" @click="tradeNav(2)">
        My order
      </div>
    </div>
    <router-view :lang="lang" :ind="ind" class="router_style"></router-view>
  </div>
</template>

<script>
export default {
  name: 'pointTab',
  data () {
    return {
      lang: 'China[CNY]',
      ind: 0,
      navIndex: 0,
      path: [
        'buyIn',
        'sellOut',
        '/myOrder/buyOrder'
      ]
    };
  },
  beforeMount () {
    this.initNav();
    let area = localStorage.getItem('area');
    let ind = localStorage.getItem('ind');
    if (area) {
      area = JSON.parse(area);
      this.lang = area.area;
      this.ind = ind;
    }
  },
  methods: {
    initNav (name = this.$route.name) {
      this.path.map((item, index) => {
        if (typeof item !== 'string') {
          item.map(i => {
            if (i === name) this.navIndex = index;
          });
        } else {
          if (item === name) this.navIndex = index;
        }
      });
    },
    tradeNav (i) {
      this.navIndex = i;
      if (this.navIndex === 2) {
        this.$router.push({path: this.path[2], query: {navIndex: 0}});
      } else {
        this.$router.replace({path: this.path[i], query: {navIndex: i === 0 ? 0 : 1}});
      }
    }
  },
  mounted () {
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/public.scss';
  .pointTab_wrap{
    background: #f4f5f7;
    position: relative;
    height: 100%;
    .header_wrap {
      .right {
        .lang {
          color: #666666;
          font-size: 26px;
          vertical-align: middle;
        }
        .icon-fanhui {
          display: inline-block;
          transform: rotate(180deg);
          font-size: 26px;
          color: #b2aebf;
          vertical-align: middle;
        }
      }
    }
    // tabswitch
    .trade_navs {
      position: fixed;
      left:0;
      top:90px;
      width:100%;
      height:87px;
      line-height:87px;
      background-color:#fff;
      display:flex;
      z-index: 30;
      &::after {
        display:block;
        content:'';
        width: 32%;
        height:2PX;
        background-color:#ff9e27;
        position:absolute;
        transition: left .3s;
        bottom:0;
      }
       &.active0::after{
        left: 0px;
        content: '';
      }
      &.active1::after{
        left: 34%;
        content: '';
      }
      .trade_nav{
        flex:1;
        text-align:center;
        font-size: 28px;
        color: #999999;
        position: relative;
        &.pay{
          color:#ff9e27;
        }
        &.sell{
          color:#ff9e27;
        }
      }
    }
    .router_style {
      overflow-y: scroll;
    }
  }
</style>
